<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style>
			.pd {
				padding: 10px;

			}

			.pd>div {
				background: #fff;
				overflow: hidden;
				border-radius: 6px;

			}

			.ov {
				overflow: hidden;
			}

			.row {
				background: #fff;
				padding: 10px 0;
			}

			.row>div {
				position: relative;
				padding: 0 10px;
			}

			.row .img {
				width: 100px;
				height: 90px;
				border-radius: 4px;
				overflow: hidden;
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				position: absolute;
				top: 0;
				left: 120px;
				right: 0;
				bottom: 0;
				padding-left: 5px;
			}

			.row .desc .title {
				font-size: 14px;
				height: 40px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
			}

			.tag {
				position: relative;
				overflow: hidden;
			}

			.tag>div {
				transform: scale(0.8);
				-webkit-transform-origin-x: 0;
				overflow: hidden;
				width: 128%;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tag span {
				color: #cd1b21;
				border: 1px solid #ff6e73;
				font-size: 12px;
				border-radius: 2px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
				margin-right: 4px;
				margin-bottom: 4px;
			}

			.van-cell {
				padding-right: 5px;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.pp {
				color: #cd1b21;
				font-size: 18px;
				margin: 0 10px 0 0;
			}
		</style>

	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="收藏夹" left-arrow @click-left="onClickLeft"></van-nav-bar>
				<div class="body-with-bottom">
					<div class="content">
						<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
							@load="listOnLoad">
							<div v-for="(item,index) in collectionList">
								<van-swipe-cell>
									<div class="ov">
										<div class="p" @click="intoDetail(item,$event)">
											<div class="row">
												<div>
													<div class="img">
														<img v-lazy="shoppingMallServerIP + item.ThumbnailUrl160" />
													</div>
													<div class="desc">
														<div class="title"><span
																class="hot">{{item.BrandName}}</span>{{item.ProductName}}
														</div>
														<div class="tag">
															<div>
																<span v-for="tagItem in getTagArray(item)"
																	v-if="tagItem && tagItem.indexOf('套餐') == -1">{{tagItem}}</span>
															</div>

														</div>
														<div class="pp">
															<span style="font-size: 12px;">￥</span>{{item.SalePrice}}
															<span
																style="font-size: 12px;color: #9e9e9e;">{{item.VistiCounts}}人浏览过</span>
														</div>
													</div>
												</div>

											</div>

										</div>
									</div>
									<template slot="right">
										<van-button square type="danger" text="删除" style="height: 100%;"
											@click.stop="deleteShop(item,index)"></van-button>
									</template>
								</van-swipe-cell>
							</div>

						</van-list>

					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();


		Vue.use(vant.Lazyload, {
			loading: '../image/no.png',
			error: '../image/no.png'
		});

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				listLoading: false,
				listFinished: true,
				pageIndex: 1,
				pageSize: 20,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				collectionList: []

			},
			created: function() {
				this.getCollectionList();
			},
			methods: {
				getCollectionList() {
					var that = this;
					that.showLoading = true;
					var obj = {
						pageIndex: that.pageIndex,
						pageSize: that.pageSize
					}
					FLD.ajax('sp_favoriteList', obj, function(res) {
						that.showLoading = false;
						that.listFinished = false;
						that.collectionList = res.ds;
					})
				},
				listOnLoad(row) {
					var that = this;
					that.pageIndex++;
					var obj = {
						pageIndex: that.pageIndex,
						pageSize: that.pageSize
					}
					FLD.ajax('sp_favoriteList', obj, function(res) {
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.collectionList = that.collectionList.concat(res.ds);
					})
				},
				getTagArray(item) {
					var that = this;
					if (!item.TagNames) {
						return [];
					} else {
						return item.TagNames.split(',');
					}
				},
				deleteShop(item, index) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否删除该商品?'
					}).then(() => {
						FLD.ajax('sp_deleteFavorite', {
							FavoriteId: item.FavoriteId
						}, function(res) {
							layer.open({
								content: '商品删除成功!',
								skin: 'msg',
								time: 2
							});
							that.collectionList.splice(index, 1);
						})
					}).catch(() => {

					});

				},
				intoDetail(row, e) {
					var that = this;
					if ($(e.target).closest('.van-swipe-cell__wrapper').css('transform') ==
						'matrix(1, 0, 0, 1, 0, 0)') {

						window.localStorage.setItem('productData', JSON.stringify(row))
						window.localStorage.setItem('stepIndex', JSON.stringify(1))
						window.location.href = './product.html'
					}

				},
				onClickLeft() {
					uni.navigateBack()
				}
			}
		})
	</script>

</html>